<template>
	<view class="root">
		<view class="header">
			<view class="text">我的积分</view>
			<view class="value">1634522</view>
			<button>积分兑换</button>
		</view>
		<view class="body">
			<view class="title">
				<view class="text">积分明细</view>
			</view>
			<view class="content-list">
				<view class="content-item" v-for="i in 2">
					<view class="source">
						<view class="text">
							上门回收
						</view>
					</view>
					<view class="data">
						<view class="product">电视机</view>
						<view class="size">24寸</view>
						<view class="date">2024-08-01</view>
						<view class="count">100积分</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>

</script>

<style lang="scss" scoped>

	.root {
		position: relative;
		height: 85vh;
		width: 100vw;
		.header {
			border-radius: 30rpx;
			background-color: #ce9d44;
			height: 30%;
			width: 100%;
			position: relative;
			.text {
				padding-left: 100rpx;
				color: white;
				font-size: 35rpx;
				font-weight: 700;
				line-height: 6vh;
			}
			.value {
				padding-left: 50rpx;
				color: white;
				font-size: 55rpx;
				font-weight: 700;
				line-height: 7vh;
			}
			button {
				width: 35%;
				position: absolute;
				bottom: 20%;
				border-radius: 0 45rpx 45rpx 0;
				font-weight: bold;
				letter-spacing: 0.1em;
			}
			
		}
		
		.body {
			position: relative;
			bottom: 3.5%;
			height: 70%;
			width: 90%;
			margin: 0 auto;
			padding-left: 40rpx;
			padding-right: 40rpx;
			border: 1px solid white;
			box-shadow: 0 0 1px white;
			background-color: white;
			.title {
				
				padding-top: 10rpx;
				
				.text {
					position: relative;
					&::before , &::after{
						position: relative;
						bottom: 4rpx;
						display: inline-block;
						content: '';
						width: 150rpx;
						height: 2rpx;
						background-color: #ae9276;
					}
					&::before {
						margin-right: 20rpx;
					}
					&::after {
						margin-left: 20rpx;
					}
					color: #ae9276;
					font-size: 42rpx;
					text-align: center;
					
				}
			}
			.content-list {
				.content-item {
					margin-top: 10rpx;
					position: relative;
					display: flex;
					flex-direction: column;
					justify-content: center;
					
					height: 100rpx;
					&::after {
						display: block;
						background-color: #ae9276;
						content: '';
						width: 100%;
						height: 1rpx;
						position: absolute;
						bottom: 0;
					}
					
					.source {
						padding-left: 40rpx;
						padding-bottom: 6rpx;
						.text {
							
						}
					}
					.data {
						display: grid;
						grid-template-columns: 100rpx 140rpx 200rpx 1fr;
						text-align: center;
						.product {
							
						}
						.size {
							
						}
						.data {
							
						}
						.count {
							
						}
					}
					
				}
			}
		}
		
		
	}
	
	
</style>
